/*
Author: kenrich
Time:2017-03-03 -- 2016-03-08
*/
/* reset */
/*通用*/
img{
    max-width: 100%;
    width: auto\9;
    height: auto;
    border: 0;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}
a{
    text-decoration: none;
    color: #4b4b4b
}
a:hover,a:focus{
    text-decoration: none;
    outline: none;
    color: #333;
}
@font-face {
    font-family: 'emons';
    src: url('fonts/omnes-light.otf');
}
body{
    font-family:"emons","Microsoft Yahei",sans-serif, 'Titillium Web',"Arial Black";
    color: #333;
}
h1,h2,h3,h4,h5,h6{
    font-family:"emons","Microsoft Yahei",sans-serif, 'Titillium Web', "Arial Black";
    margin: 0;
    padding: 0
}
hr{
    width: 100px;
    margin: 1em auto 2em;
}
strong{
    display: block;
    font-size: 1.5em;
    font-weight: normal;
    padding:1em 0;
}
ul,li{
    margin: 0;
    padding: 0
}
li{
    list-style-type: none;
}
.left{
    float: left;
}
.right{
    float: right;
}
.db{
    display: block;
}
.dn{
    display: none;
}

/*清除浮动*/
.clearfix:before, .clearfix:after {
    content:""; display:table;
}
.clearfix:after{
    clear:both; overflow:hidden;
}
.clearfix{
    zoom:1;
}
/*end 通用*/

/*header*/
.header{
    background: #07002a;
    z-index: 9999
}
.header a{
    cursor: pointer;
}
.header .logo{
   float: left;
   height: 130px;
   line-height: 130px;
}
.phone{
    float: right;
    height: 130px;
    line-height: 130px;
    color: #fff;
    font-size: 16px;
    margin-left: 30px;
    background: url(../images/tel.png) no-repeat left center;
    -webkit-background-size: 24px;
    background-size: 24px;
    padding-left: 25px;
}    
#cssmenu{
    float: right;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu #menu-button {
  display: none;
}

#menu-line {
    position: absolute;
    top: 128px;
    left: 0;
    height: 2px;
    background: #fff;
    -webkit-transition: all 0.25s ease-out;
   -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}

#cssmenu.align-right > ul > li {
  float: right;
}

#cssmenu > ul > li > a {
  padding:0 15px;
  height: 130px;
  line-height: 130px;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  color: #6e6e6e;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #fff;
}





@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center > ul,
  #cssmenu.align-right ul ul {
    text-align: left;
  }
  #cssmenu ul li,
  #cssmenu ul ul li,
  #cssmenu ul li:hover > ul > li {
    width: 100%;
    height: auto;
    border-top: 1px solid #4F4B4B
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
  }
  #cssmenu > ul > li,
  #cssmenu.align-center > ul > li,
  #cssmenu.align-right > ul > li {
    float: none;
    display: block;
  }
  #cssmenu ul ul li a {
    padding: 20px 20px 20px 30px;
    font-size: 16px;
    color: #6e6e6e;
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li a:hover {
    color: #2ecc71;
  }

  #cssmenu ul ul{
    position: relative;
    left: 0;
    right: auto;
    width: 100%;
    margin: 0;
  }

  #menu-line {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 20px;
    color: #000000;
    cursor: pointer;
    font-size: 18px;
    text-transform: uppercase;
    color:#2ecc71;
    background: url(../images/sz.png) no-repeat right center;
  }

}

/*banner*/
.banner{
    background: #07002a;
    padding-bottom: 130px; 
}
#owl-banner .owl-pagination {
    text-align: center;
    display: block;
    width: 100%;
    position: absolute;
    bottom: -85px;
}

#owl-banner .owl-controls .owl-page span {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 5px;
    filter: Alpha(Opacity=50);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: transparent;
    border: 1px solid #fff;
}
#owl-banner .owl-controls .owl-page.active span {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 5px;
    filter: Alpha(Opacity=50);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #fff;
}
#owl-banner .owl-controls .owl-page {
    display: inline-block;
    zoom: 1;
}


/*introduce*/
.introduce{
    padding-top: 80px;
    padding-bottom: 60px;
}
.introduce-left{
    border-right: 1px solid #333;
    text-align: right;
    padding: 10px 50px 10px 0 
}
.introduce-left img{
    max-width: 200px
}
.introduce-right{
    padding: 35px 30px 20px 50px  
}
.introduce h3{
    margin-bottom: 20px;
}
.introduce p{
    margin-bottom: 20px;
}


/*rooms*/
.rooms{
    background: #f4f4f4;
    padding: 45px 0;
}
.rooms h4{
    text-align: center;
}
.rooms h5{
    text-align: center;
    font-size: 12px;
    margin: 20px 0 30px 0
}
#owl-rooms{
    padding: 0 100px
}
.rooms p{
    text-align: center;
    margin-top: 10px;
}
#owl-rooms a{
    display: inline-block;
    padding: 0 10px
}
#owl-rooms .rooms-pic{
    overflow: hidden;
}
#owl-rooms a img{
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
#owl-rooms a:hover img{
    transform:scale(1.2);
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    -o-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

#owl-rooms .owl-prev {
    background: url(../images/left.png) no-repeat center center;
    position: absolute;
    left: 0px;
    top: -70px;
    width: 35px;
    height: 35px;
    border:1px solid #666;
    border-radius: 50%;
    opacity:0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
#owl-rooms .owl-next {
    background: url(../images/right.png) no-repeat center center;
    position: absolute;
    right: 0px;
    top: -70px;
    width: 35px;
    height: 35px;
    border:1px solid #666;
    border-radius: 50%;
    opacity:0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.rooms:hover #owl-rooms .owl-prev{
    opacity:0.8;
    left: 50px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.rooms:hover #owl-rooms .owl-next{
    opacity:0.8;
    right:50px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}


/*attractions*/
.attractions{
    padding: 45px 0;
}
.attractions h4{
    text-align: center;
}
.attractions h5{
    text-align: center;
    font-size: 12px;
    margin: 20px 0 30px 0
}
.attractions p{
    text-align: center;
    margin-top: 10px;
}
#owl-attractions a{
    display: inline-block;
    padding: 0 10px
}
#owl-attractions .attractions-pic{
    overflow: hidden;
}
#owl-attractions a img{
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
#owl-attractions a:hover img{
    transform:scale(1.2);
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    -o-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
#owl-attractions .owl-pagination {
    text-align: center;
    display: block;
    width: 100%;
    position: absolute;
    bottom: -30px;
}

#owl-attractions .owl-prev {
    background: url(../images/left.png) no-repeat center center;
    position: absolute;
    left: 0px;
    top: -70px;
    width: 35px;
    height: 35px;
    border:1px solid #666;
    border-radius: 50%;
    opacity:0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
#owl-attractions .owl-next {
    background: url(../images/right.png) no-repeat center center;
    position: absolute;
    right: 0px;
    top: -70px;
    width: 35px;
    height: 35px;
    border:1px solid #666;
    border-radius: 50%;
    opacity:0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.attractions:hover #owl-attractions .owl-prev{
    opacity:0.8;
    left: 25px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.attractions:hover #owl-attractions .owl-next{
    opacity:0.8;
    right:25px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
#owl-attractions .owl-controls .owl-page span {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 5px;
    filter: Alpha(Opacity=50);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: transparent;
    border: 1px solid #bbbbbb;
}
#owl-attractions .owl-controls .owl-page.active span {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 5px;
    filter: Alpha(Opacity=50);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #bbbbbb;
    border: 1px solid #bbbbbb;
}
#owl-attractions .owl-controls .owl-page {
    display: inline-block;
    zoom: 1;
}

/*services*/
.services{
    background: #f4f4f4;
    padding: 45px 0 80px 0;
}
.services h2{
    text-align: center;
}
.services h4{
    text-align: center;
}
.services h5{
    text-align: center;
    font-size: 12px;
    margin: 20px 0 30px 0
}
.services p{
    text-align: center;
    margin-top: 10px;
}


#owl-services .owl-prev {
    background: url(../images/left.png) no-repeat center center;
    position: absolute;
    left: 0px;
    top: 0;
    width: 35px;
    height: 35px;
    border:1px solid #666;
    border-radius: 50%;
    opacity:0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
#owl-services .owl-next {
    background: url(../images/right.png) no-repeat center center;
    position: absolute;
    right: 0px;
    top: 0;
    width: 35px;
    height: 35px;
    border:1px solid #666;
    border-radius: 50%;
    opacity:0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.services:hover #owl-services .owl-prev{
    opacity:0.8;
    left: 25px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.services:hover #owl-services .owl-next{
    opacity:0.8;
    right:25px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

/*contact*/
.contact{
    padding: 45px 0 80px 0;
}
.contact h4{
    text-align: center;
}
.contact-info{
    margin:50px 120px 0 120px;
    background: #f4f4f4;
    padding: 0 15px;
}
.contact-info li{
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-top: 1px solid #D0CECE;
}
.contact-info li.tel{
    border-top: 0;
}
.contact-map{
    margin: 0 120px;
}

/*footer*/
.footer{
    height: 130px;
    background: #07002a;
}


/*大尺寸电脑*/
@media (max-width: 1200px){
 
}

/*小型电脑及竖向放置的平板*/
@media (max-width: 1024px) {
    .footer{
        height: 50px;
        line-height: 50px;
    }
    .contact-info{
        margin: 15px 0px 0 0px;
    }
    .contact-map{
        margin: 0
    }
    .contact {
       padding: 40px 0 30px 0;
    }
    .services{
        padding: 40px 0 10px 0;
    }
    #owl-services .owl-prev,#owl-services .owl-next{
        top:-50px;
        width: 24px;
        height: 24px;
        -webkit-background-size: 20px;
        background-size: 20px;
    }
    #owl-rooms .owl-prev,#owl-rooms .owl-next{
        width: 24px;
        height: 24px;
        -webkit-background-size: 20px;
        background-size: 20px;
    }
    #owl-attractions .owl-prev,#owl-attractions .owl-next{
        width: 24px;
        height: 24px;
        -webkit-background-size: 20px;
        background-size: 20px;
    }
    .logo{
        display: none;
    }
    .phone{
        display: none;
    }
    #cssmenu #menu-button{
        padding:10px 0;
        color: #fff;
        font-size: 16px;
    }
    #cssmenu #menu-button img{
        margin-right: 10px;
    }
    #cssmenu > ul > li > a {
        height: 54px;
        line-height: 54px;
        font-size: 14px;
    }
    .banner{
        padding-bottom: 40px;
    }
    #owl-banner .owl-pagination{
        bottom:-37px;
    }
    #owl-banner .owl-controls .owl-page span{
        width: 8px;
        height: 8px;
    }
    #owl-banner .owl-controls .owl-page.active span{
        width: 8px;
        height: 8px;
    }
    .introduce{
        padding: 25px 0 10px 0
    }
    .introduce-left{
        border-right:0;
        text-align: center;
        padding: 0
    }
    .introduce-right{
        padding: 0;
        padding-top: 15px;
        text-align: center;
    }
    #owl-rooms{
        padding: 0
    }
    .rooms:hover #owl-rooms .owl-prev{
        left: 10px;
    }
    .rooms:hover #owl-rooms .owl-next{
        right:10px;
    }
    #owl-attractions a{
        padding: 0
    }
}

/* 竖向放置的平板及分辨率更小的设备 */
@media (min-width: 800px) and (max-width: 1024px){
    .header .logo{
        display: block;
        height: 50px;
        line-height: 50px;
    }
    .logo img{
        height: 40px;
    }

}

@media (min-width: 768px) {

}

/* 横向放置的手机及分辨率更小的设备 */
@media  (max-width: 600px){ 


}

/* 竖向放置的手机及分辨率更小的设备 */
@media (max-width: 400px) {
    .introduce-left img{
        max-width: 150px
    }
}



/*兼容iphone4 4s*/
@media(device-height :480px) and (-webkit-min-device-pixel-ratio:2){ 
 
}
/* 兼容iphone5 5s*/ 
@media(device-height:568px) and (-webkit-min-device-pixel-ratio:2){ 
 
} 
